<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>自定义指令</title>
</head>
<body>
    <!-- 
        总结：
        一、定义语法：
            （1）局部指令：
                new Vue({                           new Vue({
                    directives:{指令名：配置对象}或         directive(){}
                })                                  )}
            (2)全局指令
                Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数)
        二、配置对象中常用的3个回调
            (1)bind: 指令与元素成功绑定时调用
            （2）inserted：指令所在元素被插入页面时调用
            （3）updates：指令所在模板结构被重新解析时调用
        三、备注：
            1、指令定义时不加v-,但使用时要加v-
            2、指令名如果是多个单词，要使用kebab-case命名方式，不要使用camelCase命名
     -->
    <div id="root">
       <!-- 
        需求1： 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
        需求2： 定义一个v-fbind指令，和v-bind指令类似，但可以让其所绑定的input元素默认获取焦点
        -->
        <h2>n的值为：<span v-text="n"></span></h2>
        <h2>n放大十倍后的值为：<span v-big="n"></span></h2>
        <button @click="n++">点我n++</button>
        <input type="text" v-fbind="n">
        
    </div>
    <script type="text/javascript">
        //全局自定义指令写法
        // Vue.directive('fbind',{
        //             bind(element, bingding){
        //                 console.log(this)//此处的this是window
        //                 //指令与元素成功绑定时 
        //                 element.value = bingding.value
        //             },
        //             inserted(element, bingding){
        //                 //指令所在元素被插入页面时
        //                 element.focus()
        //             },
        //             update(element, bingding){
        //                 //指令所在的模板被重新解析时
        //                 element.value = bingding.value
        //             }
        //         })
        Vue.directive('fbind', function(element, bingding){
                    element.value = bingding.value
                    element.focus()//此时不生效
                })
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    n:1
                }
            },
            directives:{
                //big函数何时会被调用？     
                //1.指令与元素成功绑定时 
                //2.指令所在的模板被重新解析时
                //如果自定义指令名是多个单词组成应写成'big-number'形式（带引号）
                big(element, bingding){
                    element.innerText = bingding.value * 10
                },
                // fbind(element, bingding){
                //     element.value = bingding.value
                //     element.focus()//此时不生效
                // }
                // fbind:{
                //     bind(element, bingding){
                //         console.log(this)//此处的this是window
                //         //指令与元素成功绑定时 
                //         element.value = bingding.value
                //     },
                //     inserted(element, bingding){
                //         //指令所在元素被插入页面时
                //         element.focus()
                //     },
                //     update(element, bingding){
                //         //指令所在的模板被重新解析时
                //         element.value = bingding.value
                //     }
                // }
            }
        })

    </script>
</body>
</html>